<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教练信息录入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/left.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        $(function () {
            var href = location.href;
            var coaId = 0;
            if(href.indexOf("?")>0){
                var id = href.split("?")[1];
                coaId = id.split("=")[1];
            }
            var vue = new Vue({
                el:'#app',
                data:{
                    url:'http://localhost:8889',
                    param:{isCoach:0},
                    coach:{coaSex:0},
                    sex:'',
                    posd:'',
                    coasex:0,
                    subjects:[],
                    maxId:0
                },
                methods:{
                    getCoach:function(){
                        var that = this;
                        var roleCoaId = localStorage.getItem("role_id")
                        if(roleCoaId>0&&roleCoaId!=null){
                            that.param.coaId = roleCoaId
                            that.param.isCoach = 1
                            $("#coachSub").attr("disabled",true)
                        }
                        if(coaId>0){
                            $.getJSON(that.url+"/coach/find/"+coaId,function(data){
                                that.coach = data;
                                that.coach.subId = data.subject.subId;
                                console.log(data)
                                console.log(that.coach.coaId)

                                if(that.coach.coaSex == 1){
                                    that.sex = '男'
                                }else if(that.coach.coaSex == 0){
                                    that.sex = '女'
                                }
                                if(data.picture) {

                                    $(".thumbnail>img:eq(0)").attr("src", that.url+"/images/"+that.coach.coaId +"/"+data.picture);
                                    console.log(that.url+"/images/"+that.coach.coaId +"/"+data.picture)
                                }else{
                                    console.log("照片不存在")
                                }

                            });
                        }
                    },
                    getMaxId:function(){
                        var that = this;
                        $.getJSON(that.url+"/coach/maxId",function(data){
                            console.log(data)
                            that.maxId = data;
                            console.log(that.maxId)
                        });
                    },
                    getSubjects:function(){
                        var that = this;
                        $.getJSON(that.url+"/Subject/query",function(data){
                            that.subjects = data;
                            console.log(data)
                        })
                    },
                    save:function () {
                        var that = this;
                        if(that.sex == '男'){
                            that.coasex = 1
                        }else if(that.sex == '女'){
                            that.coasex = 0
                        }
                        var account = "c000"+(that.maxId+1);
                        console.log(account);
                        var ps = {
                            coaId : that.coach.coaId,
                            subId:that.coach.subId,
                            number:account,
                            coaName:that.coach.coaName,
                            phone: that.coach.phone,
                            password : that.coach.password,
                            coaSex:that.coach.coaSex,
                            coaAge:that.coach.coaAge,
                            email:that.coach.email,
                            userType:4,
                            remark:that.coach.remark,
                            status :1
                        }
                        if((ps.subId==null)||(ps.coaName==null)||(ps.phone==null)||(ps.coaSex==null)||(ps.coaAge==null)||(ps.email==null)||(ps.remark==null)){
                            $("#msg").html("<span style='color:red'>请完善教练信息！</span>");
                        }else{
                            if(that.posd == ps.password){
                                $.post(that.url+'/coach/save',ps,function (data) {
                                    if(data !=null) {
                                        that.coach.coaId = data.coaId;
                                        $("#msg").html("<span style='color:darkgreen'>教练基本信息保存成功！</span>");
                                        console.log(ps);
                                    }else{
                                        $("#msg").html("<span style='color:red'>教练基本信息保存失败，请重试！</span>");
                                        console.log(ps);
                                    }
                                })

                            }else{
                                $("#msg").html("<span style='color:red'>两次密码不相同，请重试！</span>");
                            }

                        }


                    }
                }
            });
            vue.getCoach();
            vue.getSubjects();
            vue.getMaxId();
            $("#header").load("header.html");
            $("#left").load("left.html");
            //点击图片实现上传功能
            $(".thumbnail").click(function(){
                var $file = $(this).parent().find(".file");//找到 input标签然后单击事件
                $file.click();
            })
            //图片预览
            $(".file").change(function(){
                //获取文件选择器选择的第一个图片
                var file = this.files[0];
                console.log("获取图片"+this.files[0])
                //找到img标签
                var $img = $(this).parent().find("img");
                //用来把文件读入内存，并且读取文件中的数据
                var reader = new FileReader();
                //读取文件后的回调函数
                reader.onloadend = function () {
                    $img.attr("src",reader.result);
                }
                if(file){
                    reader.readAsDataURL(file);
                }else{
                    $img.attr('src','images/subject/bg6.jpg');
                }
            })
            //执行文件上传操作
            $("#btnup").click(function () {
                console.log(vue.coach.coaId)
                if(vue.coach.coaId !=null){
                    //表单键值对
                    var fd = new FormData();
                    fd.append("coaId",vue.coach.coaId);
                    fd.append("picture",$(".file")[0].files[0]);
                    console.log($(".file")[0].files[0])
                    console.log(fd)
                    console.log(vue.coach.coaId)
                    $.ajax({
                        url:'http://localhost:8889/coach/upload',
                        type:'POST',
                        data:fd,
                        cache: false,
                        contentType:false,
                        processData:false,
                        success:function(data){
                            if(data){
                                alert("图片上传成功")
                                console.log(111)
                            }else{
                                $(".upmsg").html("<span style='color:red;'>图片上传失败，请重试！</span>");
                                console.log(222)
                            }
                        },
                        error:function(data){
                            $(".upmsg").html("<span style='color:red;'>图片上传失败，请重试！</span>");
                            console.log(data)
                        }
                    })

                }else{
                    alert("请先保存教练基本信息")
                }

            })
        })
    </script>
    <style>
        .input-group-addon{background: #fff}
        .mrow{margin-top:15px;padding:5px 15px;}
        .msg{padding-top:10px;font-size:16px;font-weight: bold}
        .file{opacity: 0;width:0;height:0;position:absolute;top:0;left:0;z-index:-1}
        .bg {
            background:url(images/subject/bg2.jpg) no-repeat center fixed;
            background-size:100%;
        }
        .bgcon{

            background: white;
            opacity:0.9;
        }
        .jllb{

            margin-left:10px;
            margin-top:10px;
            margin-bottom:10px;
        }
        .remark{
            margin-bottom: 20px;
            margin-right: 10px;
            color: #737373;
        }
        .tithead{
            margin-left:5px;
            margin-bottom: 30px;
        }

    </style>
</head>
<body>
<div class="container-fluid bgcon" id="app">
    <div class="row" id="header">

    </div>
    <div class="row">
        <div class="col-md-2" id="left">

        </div>
        <div class="col-md-9" style="margin-left:30px;margin-top:10px">

            <div class="row tithead">
                <div class="col-md-4"><h3 class="glyphicon glyphicon-list"> 教练信息管理
                </h3></div>
                <div class="col-md-6"></div>

                <div class="col-md-2" >
                    <h4 style="margin-top:30px;margin-left:30px">
                        <a href="coachs.html" style="text-decoration:none;color: #666666">
                            教练列表 <i class="glyphicon glyphicon-chevron-right"></i>
                        </a>
                    </h4>
                </div>

            </div>
            <div class="row">

                <div class="col-md-12">
                    <div>

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#coa" aria-controls="coa" role="tab" data-toggle="tab">教练基本信息</a>
                            </li>
                            <li role="presentation">
                                <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">教练图片</a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="coa">
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">教练姓名</label>
                                        <input v-model="coach.coaName" class="form-control" placeholder="请输入教练姓名">
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">教练账号</label>
                                        <input v-model="coach.number" class="form-control" placeholder="教练账号自动生成" readonly>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">科目类型</label>
                                        <select v-model="coach.subId" class="form-control" id="coachSub">
                                            <option v-for="s in subjects" :value="s.subId">{{s.subType}}</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">手机号码</label>
                                        <input v-model="coach.phone" class="form-control"  placeholder="请输入手机号码">
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">输入密码</label>
                                        <input v-model="coach.password"class="form-control" type="password"  placeholder="请输入密码">
                                    </div>
                                </div><div class="form-group mrow">
                                <div class="input-group">
                                    <label class="input-group-addon">确认密码</label>
                                    <input v-model="posd"class="form-control" type="password"  placeholder="请确认密码">
                                </div>
                            </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">性别</label>
                                        <!--<input v-model="sex"class="form-control" placeholder="男 / 女">-->
                                        <select v-model="coach.coaSex" class="form-control">
                                            <option value="0">女</option>
                                            <option value="1">男</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">年龄</label>
                                        <input v-model="coach.coaAge" type="number" class="form-control" placeholder="请输入年龄">
                                        <label class="input-group-addon">岁</label>
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">微信号</label>
                                        <input v-model="coach.email" class="form-control"  placeholder="请输入微信号">
                                    </div>
                                </div>
                                <div class="form-group mrow">
                                    <div class="input-group">
                                        <label class="input-group-addon">备注</label>
                                        <input v-model="coach.remark" class="form-control"  placeholder="输入请输入备注信息">
                                    </div>
                                </div>
                                <div class="row mrow">



                                    <div class="col-md-10">
                                        <p class="text-center msg" id="msg"></p>
                                    </div>
                                    <div class="col-md-2">
                                        <button @click="save" class="btn btn-primary btn-block">保存</button>
                                    </div>
                                </div>
                            </div>
                            <!--picture-->
                            <div role="tabpanel" class="tab-pane" id="profile">
                                <div class="row mrow">
                                    <div class="col-xs-6 col-md-3">
                                        <input type="file" class="file">
                                        <a href="#" class="thumbnail">
                                            <img src="images/subject/bg6.jpg" alt="">
                                        </a>
                                    </div>

                                    <div class="col-md-7"></div>
                                    <div class="col-md-2" style="margin-top:150px">
                                        <button id="btnup" class="btn btn-primary btn-block">上传图片</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row text-right remark"><h5>备注：教练详细信息录入</h5></div>
        </div>
    </div>
</div>
</body>
</html>